<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script src="./jquery-1.8.3.js"></script>

    <script>
        $(document).ready(function () {
            // 元素选择器
            $('span').css('color', 'red');

            // ID选择器
            $('#my_id').css('color', 'red');

            // ID选择器
            $('.my_class').css('color', 'red');

            // 属性选择器
            $('[href]').css('color', 'red');
            $('[href="https://www.aliyun.com"]').css('background-color', 'green');

            // 元素嵌套 & 组合选择器
            $('#my_ol ul').css('color', 'red');
        });

    </script>

</head>

<body>

    <h3>本示例用于展示jQuery的选择器，对于选择到的元素，修改其css样式：字体红色。</h3>
    <hr>

    <h4>元素选择器</h4>
    <div>
        <span>hello, world.</span>
        <span>Hello, World.</span>
        <div>hello, world.</div>
        <div>Hello, World.</div>
    </div>

    <hr>

    <h4>ID选择器</h4>
    <div>
        <div id="my_id">hello, world.</div>
        <div>Hello, World.</div>
    </div>

    <hr>

    <h4>class选择器</h4>
    <div>
        <div class="my_class">hello, world.</div>
        <div>Hello, World.</div>
    </div>

    <hr>

    <h4>属性选择器</h4>
    <div>
        <h5>没有href属性</h5>
        <a>百度</a>
        <a>腾讯</a>
        <a>阿里</a>
        <br>
        <h5>有href属性，但不赋值。</h5>
        <a href>百度</a>
        <a href>腾讯</a>
        <a href>阿里</a>
        <br>
        <h5>有href属性，且赋值。</h5>
        <a href="https://www.baidu.com">百度</a>
        <a href="https://wwww.qq.com">腾讯</a>
        <a href="https://www.aliyun.com">阿里</a>
    </div>

    <hr>

    <h4>元素嵌套 & 组合选择器</h4>
    <div>
        <ol id="my_ol">
            <li>花生</li>
            <li>瓜子</li>
            <li>八宝粥</li>
            <li>
                <ul>
                    <li>啤酒</li>
                    <li>饮料</li>
                    <li>矿泉水</li>
                </ul>
            </li>
            <li>
                <ol>
                    <li>烟台苹果</li>
                    <li>莱阳梨</li>
                    <li>不如潍坊萝卜皮</li>
                </ol>
            </li>
        </ol>

    </div>


</body>

</html>